<template>
  <div>
    <div class="nav-top">
      <div class="tx">
        <van-uploader v-model="fileList" multiple/>
      </div>
        <div class="ss">
             <p class="deng" @click="deng" v-show="show">立即登录</p>
      <div class="q1">积分：0</div>
      <p id="tui" @click="tui" v-show="show1">退出登录</p>
        </div>
    </div>
    <van-notice-bar
      left-icon="volume-o"
      text="有种死人，叫屠龙者。
纵情山河万里，肆意九州五岳。
龙战于野！
爱恨痴狂，抵不过沧海一笑。
龙有逆鳞，触之必死。
破碎的身躯可以修复，友情...也是如此么？
我的是我的，你的也是我的，记住了，狐狸！
爱恨痴狂，抵不过沧海一笑。
驱风雨，走雷霆。
长枪一动，白龙吟。
通常颜值不合格的龙，才会沦落为野怪。
血仍未冷！
你的屠龙刀是把伪劣品，而且，你也是。
种族灭绝,就该像这样。
破碎的身躯可以修复，友情...也是如此么？
珍惜你剩下的生命。
真龙之怒!
你管他那么多，上天的安排的最大！
爱一个人需要理由吗?不需要吗?需要吗？
我怎么会爱上一个我讨厌的人呢?请给我一个理由，拜托~！
"
    />
    <div class="content">
      <div class="box">
        <van-nav-bar left-text="我的订单" @click-right="deng">
          <template #right>
            <van-icon name="arrow" size="18" />
          </template>
        </van-nav-bar>
        <div class="ding">
          <div class="w1">
            <img src="../../assets/img/q1.png" class="imgs" />待付款
          </div>
          <div class="w1">
            <img src="../../assets/img/q2.png" class="imgs" />待发货
          </div>
          <div class="w1">
            <img src="../../assets/img/q3.png" class="imgs" />待收货
          </div>
          <div class="w1">
            <img src="../../assets/img/q4.png" class="imgs" />待评价
          </div>
        </div>
      </div>
      <div class="box1">
        <div class="ding">
          <div class="w1">
            <img src="../../assets/img/w1.png" class="imgs" />我的余额
          </div>
          <div class="w1">
            <img src="../../assets/img/w2.png" class="imgs" />我的砍价
          </div>
          <div class="w1">
            <img
              src="../../assets/img/w3.png"
              class="imgs"
            />我的礼劵
          </div>
        </div>
        <div class="ding">
          <div class="w1">
            <img src="../../assets/img/a1.png" class="imgs" />我的收藏
          </div>
          <div class="w1" @click="di">
            <img src="../../assets/img/a2.png" class="imgs" />我的地址
          </div>
          <div class="w1">
            <img src="../../assets/img/a3.png" class="imgs" />联系客服
          </div>
        </div>
      </div>
    </div>
    <Button />
  </div>
</template>
<script>
import Button from "../../components/nav/button-nav";
export default {
  components: {
    Button,
  },
  data() {
    return {
      fileList: [
        {
          url: require("../../assets/111.jpg"),
        },
      ],
      show: true,
      show1: false,
    };
  },
  mounted() {
    if (localStorage.getItem("token")) {
      this.show = false;
      this.show1 = true;
    }
  },
  methods: {
    // 登录
    deng() {
      this.$router.push({ path: "/login" });
    },
    // 退出登录
    tui() {
      this.$router.push({ path: "/login" });
      localStorage.removeItem("token");
    },
    di() {
      this.$router.push({ path: "/di" });
    },
  },
};
</script>
<style  scoped>
* {
  margin: 0;
  padding: 0;
}
.nav-top {
  width: 100%;
  height: 160px;
  background: rgb(193, 177, 143);
}
.tx {
  width: 100px;
  height: 100px;
  float: left;
  margin: 20px;
  padding: 12px;
  overflow: hidden;
  box-sizing: border-box;
}
.content {
  width: 100%;
  height: 400px;
  float: left;
  background: rgb(245, 245, 245);
}
.box {
  width: 100%;
  height: 140px;
  background: rgb(255, 255, 255);
  margin-top: 20px;
}
.box1 {
  width: 100%;
  height: 200px;
  background: rgb(255, 255, 255);
  margin-top: 20px;
}
.ding {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.w1 {
  width: 70px;
  height: 70px;
  line-height: 1px;
  text-align: center;
}
.imgs {
  width: 30px;
  height: 30px;
  padding: 15px;
}
.deng {
  width: 180px;
  color: #fff;
  font-size: 26px;
  float: left;
  margin-top: 10px;
}
#tui {
  width: 180px;
  color: #fff;
  float: left;
  font-size: 26px;
  margin-top: 15px;
}
.q1 {
  width: 80px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  background: lightpink;
  border-radius: 5px;
  float: left;
  color: #fff;
  font-size: 16px;
  margin-top: 15px;
}
.ss{
  width: 200px;
  height: 100px;
  float: left;
  margin-top: 30px;
  margin-left: -10px;
}
</style>